<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>你现在的工资是多少</title>
</head>
<style>
    body{
        margin: 0;
        padding: 0;
        width: 100vw;
        height: 100vh;
        overflow: hidden;
      background:linear-gradient(0, #29bdd9 0%, #276ace 100%);
    }
    .box{
        text-align: center;
        color:#fff
    }
    .num{
        margin: 15px auto;
        text-align: center;
        z-index: 2;
    }
    .num div:nth-of-type(1){
        margin: 0 auto;
        font-size: 37px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #fff;
        line-height: 52px;
    }
    .num div:nth-of-type(2){
        margin: 0 auto;
        font-size: 50px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #fff;
        line-height: 54px;
        letter-spacing: 3px;
    }
       .num2{
        text-align: center;
        z-index: 2;
    }
    .num2 span:nth-of-type(1){
        margin: 0;
        font-size: 37px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #fff;
        line-height: 52px;
    }
    .work{
        color:#fff
    }
    .worktime{
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
    }
    .money{
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        color: #fff5;
        margin: 15px auto;
    }
    .inputtime{
        width: 100px;
        display: none;
        background: #29bdd9;
        border: 1px solid transparent;
        height: 20px;
    }
    .inputmoney{
        width: 60px;
        display: none;
        background: #29bdd9;
        border: 1px solid transparent;
        height: 20px;
    }


.box2 {
    width: 100%;
    height: 200px;
    overflow: hidden;
}

.float {
    width: 30%;
    height: 40px;
    background: white;
    border-radius: 25px;
    position: relative;
}

/*.box2:hover .float:nth-child(1) {
    animation: piao 10s linear infinite;
}*/

.float:nth-child(2) {
    width: 30%;
    height: 40px;
    background: white;
    border-radius: 25px;
}

/*.box2:hover .float:nth-child(2) {
    animation: piao 8s linear infinite;
}*/

.float:nth-child(3) {
    width: 20%;
    height: 30px;
    background: white;
    border-radius: 25px;
}

.float:before {
    content: "";
    width: 40%;
    height: 30px;
    position: absolute;
    left: 20%;
    top: -30%;
    background: white;
    border-radius: 50%;
}

.add {
    width: 50%;
    height: 30px;
    position: absolute;
    left: 30%;
    bottom: -30%;
    background: white;
    border-radius: 50%;
}

.float:after {
    content: "";
    width: 40%;
    height: 30px;
    position: absolute;
    left: 50%;
    top: -20%;
    background: white;
    border-radius: 50%;
}



</style>
<body class="body">
       <div class="box2">
            <div class="float">
                <div class="add"></div>
            </div>
            <div class="float">
                <div class="add"></div>
            </div>
            <div class="float">
                <div class="add"></div>
            </div>
        </div>
    <div class="box">
        <div class="num">
        </div>
        <div class="work">
                本月工作日有：
        </div>
          <div class="worktime">
            工作时间：
            <span  class="alltime">08:30-17:30</span>
            <Input placeholder="请输入工作时间" class="inputtime" oninput="changeworktime()" value="08:30-17:30"></Input>
        </div>
        <div class="money">
            <div class="num2"></div>
            <span class="allmoney">/1000</span>
            <Input placeholder="请输入你的工资" class="inputmoney" oninput="changemoney()" value="1000"></Input>
        </div>
     
    </div>
</body>
<script>

//云
    let floa = document.querySelectorAll(".float");
    let box2 = document.querySelector(".box2");
    let widthbox2 = box2.offsetWidth;
    let pos = [];
    for (let i = 0; i < floa.length; i++) {
        let floatwidth = floa[i].offsetWidth;
        let floatheight = floa[i].offsetHeight;
        let rleft;
        let rtop;
        do {
            rleft = Math.floor(Math.random() * (widthbox2 - floatwidth));
            rtop = Math.floor(Math.random() * 100);
        } while (checkpos(rleft, rtop));
        floa[i].style.cssText = `left:${rleft}px;top:${rtop}px`;
        pos.push({l: rleft, t: rtop, w: floatwidth, h: floatheight})
    }

    function checkpos(l, t) {
        for (let i = 0; i < pos.length; i++) {
            if (l < pos[i].l + pos[i].w && l > pos[i].l - pos[i].w && t < pos[i].t + pos[i].h && t > pos[i].t - pos[i].h) {
                return true;
            }
        }
        return false;
    }

    for (let i = 0; i < 3; i++) {
        let speed = 1;
        let left = pos[i].l;
        setInterval(function () {
            left += speed;
            if (left >= (widthbox2 - pos[i].w) || left <= 0) {
                speed *= -1;
            }
            floa[i].style.left = left + "px";
        }, 50)
    }


    const jieri=[                                 // 节假日 ，每年更新一次  type 1：节假日，0 工作日
        {date:'2022-09-10',type:1},
        {date:'2022-09-11',type:1},
        {date:'2022-09-12',type:1},
        {date:'2022-10-01',type:1},
        {date:'2022-10-02',type:1},
        {date:'2022-10-03',type:1},
        {date:'2022-10-04',type:1},
        {date:'2022-10-05',type:1},
        {date:'2022-10-06',type:1},
        {date:'2022-10-07',type:1},
        {date:'2022-10-08',type:0}, 
        {date:'2022-10-09',type:0},
    ]

    const monthType=[                              
        {month:1,dateNum:31},
        {month:2,dateNum:new Date().getFullYear()%4?28:29},
        {month:3,dateNum:31},
        {month:4,dateNum:30},
        {month:5,dateNum:31},
        {month:6,dateNum:30},
        {month:7,dateNum:31},
        {month:8,dateNum:31},
        {month:9,dateNum:30},
        {month:10,dateNum:31},
        {month:11,dateNum:30},
        {month:12,dateNum:31},
    ]

    const body=document.getElementsByClassName("body")[0]
    const num=document.getElementsByClassName("num")[0]
    const num2=document.getElementsByClassName("num2")[0]
    const work=document.getElementsByClassName("work")[0]
    const allmoneydom=document.getElementsByClassName("allmoney")[0]
    const inputmoney=document.getElementsByClassName("inputmoney")[0]
    const alltime=document.getElementsByClassName("alltime")[0]
    const inputtime=document.getElementsByClassName("inputtime")[0]

    var timer=null
    var workdays= 0
    var dateIndex=0
    var worktime=localStorage.getItem("time")||'08:30-17:30'
    var allmoney=localStorage.getItem("money")||1000
    allmoneydom.innerHTML='/'+allmoney
    alltime.innerHTML=worktime
    inputmoney.value=allmoney
    inputtime.value=worktime
    monthdates()  
    restarttimer()
   
   function restarttimer(){
    timer&&clearInterval(timer)
        changeTime()
        timer= setInterval(()=>{
            changeTime()
        },200)
   }
   function changeTime(){
        var timedata=new Date()
        var day=timedata.getDay()
        var Y=timedata.getFullYear()
        var M=timedata.getMonth()+1
        var D=timedata.getDate()
        var h=timedata.getHours()<10?"0"+timedata.getHours():timedata.getHours()
        var m=timedata.getMinutes()<10?"0"+timedata.getMinutes():timedata.getMinutes()
        var s=timedata.getSeconds()<10?"0"+timedata.getSeconds():timedata.getSeconds()
        var str1=M+"月"+D+"日"
        var str2=h+":"+m+":"+s
        const dm=allmoney/workdays
        const tm=dm*(worktimestatus(Y+"-"+M+"-"+D))
        var money=dm*(dateIndex-1)+tm
        num.innerHTML='<div>'+str1+'</div>'+'<div>'+str2+'</div>'
        num2.innerHTML='<span>'+money.toFixed(5)+'</span>'
    }
   function changemoney(){
        allmoney=inputmoney.value
        allmoneydom.innerHTML='/'+inputmoney.value
        restarttimer()
   }
   function changeworktime(){
        worktime=inputtime.value
        alltime.innerHTML=inputtime.value
        restarttimer()
   }

   body.onclick=(e)=>{
    if(e.target.className=="allmoney"){
        allmoneydom.style.display="none"
        inputmoney.style.display="block"
    }else if(e.target.className!=="inputmoney"){
        allmoneydom.style.display="block"
        inputmoney.style.display="none"
    }
     if(e.target.className=="alltime"){
        alltime.style.display="none"
        inputtime.style.display="block"
    }else if(e.target.className!=="inputtime"){
        alltime.style.display="block"
        inputtime.style.display="none"
    }
    localStorage.money=allmoney
    localStorage.time=worktime
   }

   function worktimestatus(today){
        const timer=worktime.split('-')
        const time1=new Date(today+` ${timer[0]}:00`).getTime()
        const time2=new Date(today+` ${timer[1]}:00`).getTime()
        const now=new Date().getTime()
        if(now<time1){return 0}
        else if(now>time1&&now<time2){return (now-time1)/(time2-time1)}
        else{return 1}
   }

   function monthdates(){
        const timeTable=new Date()
        var Y=timeTable.getFullYear()
        var M=timeTable.getMonth()+1
        const days=monthType.find(item=>item.month==M)?.dateNum
        var i=1
        var dates=[]
        while(i<=days){
         const dateItem=new Date(Y+'-'+M+'-'+i)
         var Y=dateItem.getFullYear()
         var M=dateItem.getMonth()<9?"0"+(dateItem.getMonth()+1):dateItem.getMonth()+1
         var D=dateItem.getDate()<10?"0"+dateItem.getDate():dateItem.getDate()
         var day=dateItem.getDay()
         if(jieri.some(item=> (item.type=='1'&&item.date==(Y+'-'+M+'-'+D))||([6,0].includes(day)&&!jieri.find(item=>item.date==Y+'-'+M+'-'+D)))){
            i++
         }
         else{
            dates.push(dateItem)
            i++
          } 
        }
        workdays=dates.length
        dateIndex= dates.findIndex(item=>item.getDate()==timeTable.getDate())+1
        work.innerHTML='本月工作日：'+dateIndex+'/'+workdays+'天'
    }   




</script>
</html>